import { Nodes } from '@knno/dom';
import { Input as UIInput, InputEventMap, InputType } from '../components/input/input';
import { JSXProps } from '@knno/dom/jsx';
import { AttrCheck, isBool, isNumber, isStr, jsxBuild, On } from './utils';

export { UIInput };

interface InputProps extends JSXProps<UIInput>, On<InputEventMap, UIInput> {
	readonly?: boolean;
	clearable?: boolean;
	prefixIcon?: string;
	suffixIcon?: string;
	type?: InputType;
	value?: string;
	placeholder?: string;
	maxLength?: number;
	min?: string | number;
	max?: string | number;
	step?: 'any' | number;
	disabled?: boolean;
	invalid?: boolean;
}

const ATTRS: AttrCheck = {
	readonly: isBool,
	clearable: isBool,
	prefixIcon: isStr,
	suffixIcon: isStr,
	type: isStr,
	value: isStr,
	placeholder: isStr,
	maxLength: isNumber,
	min: (v) => isNumber(v) || isStr(v),
	max: (v) => isNumber(v) || isStr(v),
	step: (v) => isNumber(v) || v === 'any',
	invalid: isBool,
	disabled: isBool,
};

export function Input(props: InputProps, children: Nodes[]): UIInput {
	return jsxBuild(new UIInput(), props, children, ATTRS);
}
